<template>
    <div id="loginBox">
        <div id="avatar">
        </div>
        <div id="login_form">
            <el-form label-width="80px" :model="loginForm" :rules="rules" ref="loginFormRef">
                <el-form-item label="账号:" prop="username">
                    <el-input v-model="loginForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码:" prop="password">
                    <el-input type="password" v-model="loginForm.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm()">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data(){
            return{
                loginForm:{},
                rules: {
                    username: [{required: true, message: "请输入账号", trigger: "blur"},
                        {min: 3, max: 12, message: "账号的长度必须{6~12}", trigger: "blur"}
                    ],
                    password: [
                        {required: true, message: "请输入密码", trigger: "blur"},
                        {min: 4, max: 16, message: "密码的长度必须{4~16}", trigger: "blur"}
                    ]
                }
            }
        },
        methods:{
            //点击注册按钮，跳转到注册页面
            zc(){
               this.$router.push("/zhuce");
                //window.location.href="/zhuce";
            },
            submitForm(){
                this.$refs['loginFormRef'].validate((valid) => {
                    if (valid) {
                        this.$http.post("/sso/login", this.loginForm).then(result => {
                            if (result.data.code == 2000) {
                                this.$message.success(result.data.msg);
                                //获取登录成功后的token
                                var token = result.data.data;
                                //把token保存在sessionStorage   可以理解为session
                                sessionStorage.setItem("token", token);
                                this.$router.push("/home")
                            } else {
                                this.$message.error(result.data.msg);
                            }
                        });
                    }
                })
            }
        }
    }
</script>

<style scoped>
    #loginBox {
        width: 450px;
        height: 300px;
        background: white;
        border-radius: 3px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

    }
    body{
        background: url("../assets/2.gif") no-repeat;
        background-size: cover;
    }
    #avatar{
        height: 130px;
        width: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 0 10px #ddd;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        background:url("../assets/guo.jpg") no-repeat;
        background-size: 150px 150px;
    }
    #login_form{
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
</style>